<template>
  <div class="sHeaderTop">
    <h1 class="tit">开发笔记</h1>
    <div class="search">
      <SearchResult @select="selectSearch" />
    </div>
    <div class="des">记录学习 - 速查手册 | 关于</div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import SearchResult from './SearchResult.vue'

@Component({
  components: {
    SearchResult
  }
})
export default class HeaderTop extends Vue {
  // @Prop(Number) readonly propA!: number
  // selectedIndex = 0

  // select (index: number) {
  //   console.log(index)
  //   this.selectedIndex = index
  // }
  selectSearch (id: string) {
    this.$emit('selectSearch', id)
  }
}
</script>

<style scoped>
.sHeaderTop {
  position: fixed;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 1;

  display: flex;
  padding: 8px;
  border-bottom: 1px solid #dadce0;
  background: #fff;
}
.tit {
  font-size: 26px;
  padding: 6px 10px 10px 0;
  width: 120px;
  font-weight: bold;
}
.des {
  padding: 16px 0 0 10px;
  /* flex: 1;
  text-align: right; */
}
.search {
  flex: 1;
  /* width: 360px; */
}
</style>
